<template>
	<div class="app">
		<div>
			<button @click="change">切换</button>
		</div>

		<transition name="why" mode="out-in" appear>
			<component :is="isShow ? 'home' : 'about'"></component>
		</transition>
	</div>
</template>

<script>
	import About from './About.vue'
	import Home from './Home.vue'
	export default {
		components: {
			Home,
			About,
		},
	}
</script>

<script setup>
	import { ref } from 'vue'
	const isShow = ref(true)

	const change = () => {
		isShow.value = !isShow.value
	}
</script>

<style scoped>
	h2 {
		display: inline-block;
	}

	.why-enter-from,
	.why-leave-to {
		opacity: 0;
	}

	.why-enter-to,
	.why-leave-from {
		opacity: 1;
	}

	.why-enter-active {
		animation: whyAnim 2s ease;
		transition: opacity 2s ease;
	}

	.why-leave-active {
		animation: whyAnim 2s ease reverse;
		transition: opacity 2s ease;
		/* animation: whyLeaveAnim 2s ease; */
	}

	@keyframes whyAnim {
		0% {
			transform: scale(0);
		}

		50% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
